<script setup lang="ts">
import { ref } from "vue";
import { useColumns } from "./columns";
import { IconifyIconOnline } from "@/components/ReIcon";
import { PlusDialogForm } from "plus-pro-components";
import type { PlusColumn, FieldValues } from "plus-pro-components";
import {
  createFlowerType,
  deleteFlowerType,
  updateFlowerType
} from "@/api/flower";
import { message } from "@/utils/message";

const tableRef = ref();

const {
  loading,
  columns,
  dataList,
  pagination,
  loadingConfig,
  adaptiveConfig,
  searchText,
  onSizeChange,
  onCurrentChange,
  refresh,
  search
} = useColumns({
  onEdit: (row, index) => {
    editForm.value = {
      id: row.id,
      name: row.name
    };

    editFormVisible.value = true;
  },
  onDelete: async (row, index) => {
    try {
      await deleteFlowerType(row.id);
      message("删除成功", { type: "success" });
      refresh();
    } catch (e) {
      if (e.response.data && e.response.data.message) {
        message(e.response.data.message, { type: "error" });
      } else {
        message("删除失败", { type: "error" });
      }
      console.log(e);
    }
  }
});

const formRules = {
  name: [
    {
      required: true,
      message: "请输入名称"
    }
  ]
};

const submitLoading = ref<boolean>(false);

// ========== 新建 ==========
const newFormColumns: PlusColumn[] = [
  {
    label: "名称",
    width: 120,
    prop: "name",
    valueType: "input"
  }
];
const newFormVisible = ref(false);
const newForm = ref<FieldValues>({});
const handleNew = () => {
  newForm.value = {};
  newFormVisible.value = true;
};

const handleCreate = async e => {
  try {
    submitLoading.value = true;
    await createFlowerType(e);
    message("创建成功", { type: "success" });
    newFormVisible.value = false;
    refresh();
  } catch (e) {
    if (e.response.data && e.response.data.message) {
      message(e.response.data.message, { type: "error" });
    } else {
      message("创建失败", { type: "error" });
    }
    console.log(e);
  } finally {
    submitLoading.value = false;
  }
};

// ========== 编辑 ==========
const editFormColumns: PlusColumn[] = [
  {
    label: "ID",
    prop: "id",
    valueType: "input",
    fieldProps: {
      disabled: true
    }
  },
  {
    label: "名称",
    prop: "name",
    valueType: "input"
  }
];

const editFormVisible = ref(false);
const editForm = ref<FieldValues>({});

const handleUpdate = async e => {
  try {
    submitLoading.value = true;
    await updateFlowerType(e);
    message("更新成功", { type: "success" });
    editFormVisible.value = false;
    refresh();
  } catch (e) {
    if (e.response.data && e.response.data.message) {
      message(e.response.data.message, { type: "error" });
    } else {
      message("更新失败", { type: "error" });
    }
    console.log(e);
  } finally {
    submitLoading.value = false;
  }
};

const handleSearch = e => {
  search();
};
</script>
<template>
  <div>
    <el-card shadow="never">
      <template #header>
        <div class="flex justify-between items-center">
          <span>鲜花分类</span>

          <el-space>
            <el-input
              v-model="searchText"
              style="width: 240px"
              clearable
              placeholder="请输入关键词"
              @change="handleSearch"
            >
              <template #append>
                <IconifyIconOnline icon="ep:search" />
              </template>
            </el-input>
            <el-button type="primary" @click="handleNew">
              <template #icon>
                <IconifyIconOnline icon="ep:plus" />
              </template>
              新增
            </el-button>
          </el-space>
        </div>
      </template>
      <pure-table
        ref="tableRef"
        border
        adaptive
        :adaptiveConfig="adaptiveConfig"
        row-key="id"
        alignWhole="center"
        showOverflowTooltip
        :loading="loading"
        :loading-config="loadingConfig"
        :data="dataList"
        :columns="columns"
        :pagination="pagination"
        @page-size-change="onSizeChange"
        @page-current-change="onCurrentChange"
      />
    </el-card>
    <PlusDialogForm
      v-model:visible="newFormVisible"
      v-model="newForm"
      :destroy-on-close="true"
      title="新建分类"
      width="480px"
      :form="{
        columns: newFormColumns,
        rules: formRules,
        labelPosition: 'top'
      }"
      :confirmLoading="submitLoading"
      @confirm="handleCreate"
    />
    <PlusDialogForm
      v-model:visible="editFormVisible"
      v-model="editForm"
      title="编辑分类"
      width="480px"
      :form="{
        columns: editFormColumns,
        rules: formRules,
        labelPosition: 'top'
      }"
      @confirm="handleUpdate"
    />
  </div>
</template>
